<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      .font-color {
        color: blue;
      }
    </style>
    <div>
      houdunren.com
      <button data-event="hiden">button</button>
      <div data-event="changeBackgroundColor" data-bg-color="red">
        houdunren.com
      </div>
      <h2 data-event="toggleClass" data-class="font-color">yahoo.com</h2>
      <div
        style="width: 200px; height: 200px; background-color: red"
        data-event="scale"
        data-opacity="1"
        data-width="100"
        data-height="20"
      ></div>
    </div>

    <script>
      //document.querySelector("div").addEventListener("click", function () {
      // console.log("div event");
      //});

      // 事件代理
      class ProxyEvent {
        constructor(obj, type = "click") {
          obj.addEventListener(type, (e) => {
            // 执行的方法名
            let event = e.target.dataset.event;
            if (this[event]) {
              this[event].call(e.target, e);
            }
          });
        }

        scale() {
          let { width, height } = this.dataset;
          this.style.width = width + "px";
          this.style.height = height + "px";
        }

        opacity(event) {
          let opacity = this.dataset.opacity;
          this.style.transtion = "1s";
          this.style.opacity = opacity;
          console.log(opacity);
        }

        toggleClass(event) {
          const className = this.dataset.class;
          this.classList.toggle(className);
        }

        hiden(event) {
          alert(this.textContent);
        }

        changeBackgroundColor() {
          this.style.backgroundColor = this.dataset.bgColor;
        }
      }

      new ProxyEvent(document.body, "click");

      //document.querySelector("button").addEventListener("click", function () {
      //  console.log("button event");
      //});
    </script>
  </body>
</html>
